<template>
  <div class="container">
    <el-row>
      <el-card shadow="never">
        <div slot="header">
          <el-form :inline="true" :model="searchForm" size="small">
            <el-form-item label="ID" class="el-search-item">
              <el-input v-model="searchForm.contentId" placeholder="ID" clearable></el-input>
            </el-form-item>
            <el-form-item label="创建时间" class="el-search-item">
              <el-date-picker v-model="checkedTime" value-format="yyyy-MM-dd HH:mm:ss" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
              </el-date-picker>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button type="success" plain icon="el-icon-search" @click="getDataList">查询</el-button>
            </el-form-item>
            <el-form-item class="el-search-item">
              <el-button v-if='hasPerm("content:content:add")' type="primary" plain icon="el-icon-plus" @click="openAdd">新增</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!--数据表格 element ui-->
        <el-table :data="tableData" :height="tableHeight" style="width: 100%" v-loading="tableLoading" element-loading-text="数据正在加载中...">
          <el-table-column prop="contentId" label="内容" align="center" sortable></el-table-column>
          <el-table-column prop="contentTypeId" label="类型" align="center" sortable></el-table-column>
          <el-table-column prop="companyId" label="发布人" align="center" sortable></el-table-column>
          <el-table-column prop="typePath" label="新闻分类路径" align="center" sortable></el-table-column>
          <el-table-column prop="contentTitle" label="标题" align="center" sortable></el-table-column>
          <el-table-column prop="subtitle" label="副标题" align="center" sortable></el-table-column>
          <el-table-column prop="display" label="2已发布 1待审核 0审核不通过" align="center" sortable></el-table-column>
          <el-table-column prop="contentValue" label="内容" align="center" sortable></el-table-column>
          <el-table-column prop="contentNo" label="编码" align="center" sortable></el-table-column>
          <el-table-column prop="issueTime" label="发行时间" align="center" sortable></el-table-column>
          <el-table-column prop="expireTime" label="过期下架时间" align="center" sortable></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center" sortable></el-table-column>
          <el-table-column prop="keyWords" label="seo引擎关键字" align="center" sortable></el-table-column>
          <el-table-column prop="description" label="seo引擎描述" align="center" sortable></el-table-column>
          <el-table-column prop="imgUrl" label="标题宣传媒体" align="center" sortable></el-table-column>
          <el-table-column prop="withMedia" label="1 0是否有媒体图片" align="center" sortable></el-table-column>
          <el-table-column prop="url" label="自定义连接" align="center" sortable></el-table-column>
          <el-table-column prop="regionPath" label="区域全路径" align="center" sortable></el-table-column>
          <el-table-column prop="type" label="1pc端 2移动客户端 3综合客户端" align="center" sortable></el-table-column>
          <el-table-column prop="longitude" label="经度" align="center" sortable></el-table-column>
          <el-table-column prop="latitude" label="纬度" align="center" sortable></el-table-column>
          <el-table-column prop="seq" label="降序" align="center" sortable></el-table-column>
          <el-table-column prop="collectionCount" label="收藏数量" align="center" sortable></el-table-column>
          <el-table-column prop="tagCount" label="称赞数量" align="center" sortable></el-table-column>
          <el-table-column prop="tagDownCount" label="贬低数量" align="center" sortable></el-table-column>
          <el-table-column prop="voteCount" label="投票数量" align="center" sortable></el-table-column>
          <el-table-column prop="commentCount" label="评论数量" align="center" sortable></el-table-column>
          <el-table-column prop="lookCount" label="查阅数量" align="center" sortable></el-table-column>
          <el-table-column prop="membershipsLevel" label="" align="center" sortable></el-table-column>
          <el-table-column prop="deleted" label="" align="center" sortable></el-table-column>
          <el-table-column v-if='hasPerm("content:content:list")' label="更多操作" align="center" width="250">
            <template slot-scope="scope">
              <el-button v-if='hasPerm("content:content:edit")' @click="openUpdate(scope.row)" size="mini" type="text" icon="el-icon-edit">编辑</el-button>
              <el-button v-if='hasPerm("content:content:del")' @click="deleteFun(scope.row)" size="mini" type="text" icon="el-icon-delete">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页组件-->
        <el-pagination style="padding:0;text-align: center;" background @size-change="handleSizeChange" @current-change="handleCurrentChange" layout="total, sizes, prev, pager, next, jumper"
                       :current-page="pageNum" :page-sizes="[10, 20, 30]" :page-size="pageSize" :total="total">
        </el-pagination>
      </el-card>
      <!--新增 编辑对话框-->
    <el-drawer :title="dialog.dialogTitle" :visible.sync="dialog.visible" :direction="dialog.direction" :size="dialog.size" :before-close="handleClose">
    <el-row class="drawer-table">
      <el-col :span="24">
        <el-form :rules="rules" ref="contentForm" :model="contentForm" size="small" label-width="80px">
          <el-form-item prop="contentId" label="内容">
            <el-input v-model="contentForm.contentId" placeholder="请输入内容" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="contentTypeId" label="类型">
            <el-input v-model="contentForm.contentTypeId" placeholder="请输入类型" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="companyId" label="发布人">
            <el-input v-model="contentForm.companyId" placeholder="请输入发布人" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="typePath" label="新闻分类路径">
            <el-input v-model="contentForm.typePath" placeholder="请输入新闻分类路径" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="contentTitle" label="标题">
            <el-input v-model="contentForm.contentTitle" placeholder="请输入标题" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="subtitle" label="副标题">
            <el-input v-model="contentForm.subtitle" placeholder="请输入副标题" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="display" label="2已发布 1待审核 0审核不通过">
            <el-input v-model="contentForm.display" placeholder="请输入2已发布 1待审核 0审核不通过" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="contentValue" label="内容">
            <el-input v-model="contentForm.contentValue" placeholder="请输入内容" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="contentNo" label="编码">
            <el-input v-model="contentForm.contentNo" placeholder="请输入编码" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="issueTime" label="发行时间">
            <el-input v-model="contentForm.issueTime" placeholder="请输入发行时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="expireTime" label="过期下架时间">
            <el-input v-model="contentForm.expireTime" placeholder="请输入过期下架时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="createTime" label="创建时间">
            <el-input v-model="contentForm.createTime" placeholder="请输入创建时间" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="keyWords" label="seo引擎关键字">
            <el-input v-model="contentForm.keyWords" placeholder="请输入seo引擎关键字" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="description" label="seo引擎描述">
            <el-input v-model="contentForm.description" placeholder="请输入seo引擎描述" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="imgUrl" label="标题宣传媒体">
            <el-input v-model="contentForm.imgUrl" placeholder="请输入标题宣传媒体" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="withMedia" label="1 0是否有媒体图片">
            <el-input v-model="contentForm.withMedia" placeholder="请输入1 0是否有媒体图片" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="url" label="自定义连接">
            <el-input v-model="contentForm.url" placeholder="请输入自定义连接" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="regionPath" label="区域全路径">
            <el-input v-model="contentForm.regionPath" placeholder="请输入区域全路径" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="type" label="1pc端 2移动客户端 3综合客户端">
            <el-input v-model="contentForm.type" placeholder="请输入1pc端 2移动客户端 3综合客户端" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="longitude" label="经度">
            <el-input v-model="contentForm.longitude" placeholder="请输入经度" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="latitude" label="纬度">
            <el-input v-model="contentForm.latitude" placeholder="请输入纬度" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="seq" label="降序">
            <el-input v-model="contentForm.seq" placeholder="请输入降序" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="collectionCount" label="收藏数量">
            <el-input v-model="contentForm.collectionCount" placeholder="请输入收藏数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="tagCount" label="称赞数量">
            <el-input v-model="contentForm.tagCount" placeholder="请输入称赞数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="tagDownCount" label="贬低数量">
            <el-input v-model="contentForm.tagDownCount" placeholder="请输入贬低数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="voteCount" label="投票数量">
            <el-input v-model="contentForm.voteCount" placeholder="请输入投票数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="commentCount" label="评论数量">
            <el-input v-model="contentForm.commentCount" placeholder="请输入评论数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="lookCount" label="查阅数量">
            <el-input v-model="contentForm.lookCount" placeholder="请输入查阅数量" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="membershipsLevel" label="">
            <el-input v-model="contentForm.membershipsLevel" placeholder="请输入" auto-complete="off"></el-input>
          </el-form-item>
          <el-form-item prop="deleted" label="">
            <el-input v-model="contentForm.deleted" placeholder="请输入" auto-complete="off"></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row class="drawer-footer">
      <el-col :span="24">
        <el-button @click="dialog.visible = false" size="small">取 消</el-button>
        <el-button type="primary" @click="submitFun()" :loading="loading.status" size="small">{{loading.status ? loading.SubText : loading.BtnText}}</el-button>
      </el-col>
    </el-row>
    </el-drawer>

    </el-row>
  </div>
</template>
<script>
  import content_content from "@/api/content/content";
  export default {
    data() {
      return {
        // 表格数据
        tableData: [],
        tableLoading: false,
        // 分页数据
        total: 0,
        pageNum: 1,
        pageSize: 10,
        // 表格高度
        tableHeight: 0,
        // 用来存放日期组件所选中的值
        checkedTime: '',
        // 查询参数
        searchForm: {contentId: null, startTime: null, endTime: null,},
        // 弹出层
        dialog: {flag: 0,dialogTitle: "",visible: false,direction: 'rtl',size: '35%'},
        // 表单参数
        contentForm: {
          contentId: null,
          contentTypeId: null,
          companyId: null,
          typePath: null,
          contentTitle: null,
          subtitle: null,
          display: null,
          contentValue: null,
          contentNo: null,
          issueTime: null,
          expireTime: null,
          createTime: null,
          keyWords: null,
          description: null,
          imgUrl: null,
          withMedia: null,
          url: null,
          regionPath: null,
          type: null,
          longitude: null,
          latitude: null,
          seq: null,
          collectionCount: null,
          tagCount: null,
          tagDownCount: null,
          voteCount: null,
          commentCount: null,
          lookCount: null,
          membershipsLevel: null,
          deleted: null,
        },
        // 提交按钮文字
        loading: {status: false,BtnText: '确 定',SubText: '提交中...'},
        // 表单校验
        rules: {
          contentId: [{required: true,trigger: "change",message: "请输入内容"}],
          contentTypeId: [{required: true,trigger: "change",message: "请输入类型"}],
          companyId: [{required: true,trigger: "change",message: "请输入发布人"}],
          typePath: [{required: true,trigger: "change",message: "请输入新闻分类路径"}],
          contentTitle: [{required: true,trigger: "change",message: "请输入标题"}],
          subtitle: [{required: true,trigger: "change",message: "请输入副标题"}],
          display: [{required: true,trigger: "change",message: "请输入2已发布 1待审核 0审核不通过"}],
          contentValue: [{required: true,trigger: "change",message: "请输入内容"}],
          contentNo: [{required: true,trigger: "change",message: "请输入编码"}],
          issueTime: [{required: true,trigger: "change",message: "请输入发行时间"}],
          expireTime: [{required: true,trigger: "change",message: "请输入过期下架时间"}],
          createTime: [{required: true,trigger: "change",message: "请输入创建时间"}],
          keyWords: [{required: true,trigger: "change",message: "请输入seo引擎关键字"}],
          description: [{required: true,trigger: "change",message: "请输入seo引擎描述"}],
          imgUrl: [{required: true,trigger: "change",message: "请输入标题宣传媒体"}],
          withMedia: [{required: true,trigger: "change",message: "请输入1 0是否有媒体图片"}],
          url: [{required: true,trigger: "change",message: "请输入自定义连接"}],
          regionPath: [{required: true,trigger: "change",message: "请输入区域全路径"}],
          type: [{required: true,trigger: "change",message: "请输入1pc端 2移动客户端 3综合客户端"}],
          longitude: [{required: true,trigger: "change",message: "请输入经度"}],
          latitude: [{required: true,trigger: "change",message: "请输入纬度"}],
          seq: [{required: true,trigger: "change",message: "请输入降序"}],
          collectionCount: [{required: true,trigger: "change",message: "请输入收藏数量"}],
          tagCount: [{required: true,trigger: "change",message: "请输入称赞数量"}],
          tagDownCount: [{required: true,trigger: "change",message: "请输入贬低数量"}],
          voteCount: [{required: true,trigger: "change",message: "请输入投票数量"}],
          commentCount: [{required: true,trigger: "change",message: "请输入评论数量"}],
          lookCount: [{required: true,trigger: "change",message: "请输入查阅数量"}],
          membershipsLevel: [{required: true,trigger: "change",message: "请输入"}],
          deleted: [{required: true,trigger: "change",message: "请输入"}],
        },
      };
    },
    mounted() {
      this.$nextTick(() => {
        this.tableHeight = window.innerHeight - 205;
      });
    },
    created() {
      this.getDataList();
    },
    watch: {
      "checkedTime"(value) {
        this.searchForm.startTime = null;
        this.searchForm.endTime = null;
        if (value != null) {
          let timeArr = value.toString().split(",");
          timeArr.forEach((item,i) => {
            if(i === 0) {
              this.searchForm.startTime = item;
            }else {
              this.searchForm.endTime = item;
            }
          });
        }
      }
    },
    methods: {
      handleClose(done) {
        this.resetForm();
        done();
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getDataList();
      },
      handleCurrentChange(val) {
        this.pageNum = val;
        this.getDataList();
      },
      // 获取列表
      getDataList() {
        this.tableLoading = true;
        content_content.list({
          current: this.pageNum, size: this.pageSize, contentId: this.searchForm.contentId,
          startTime: this.searchForm.startTime, endTime: this.searchForm.endTime
        }).then(res => {
          if(res.data.code === 2000) {
            this.tableData = res.data.data.records;
            this.total = res.data.data.total;
          }
          this.tableLoading = false;
        });
      },
      // 新增按钮操作
      openAdd() {
        this.dialog.flag = 0;
        this.resetForm("contentForm");
        this.dialog.dialogTitle = "新增";
        this.dialog.visible = true;
      },
      // 更新按钮操作
      openUpdate(row) {
        this.dialog.flag = 1;
        this.resetForm("contentForm");
        this.dialog.dialogTitle = "编辑";
        this.dialog.visible = true;
        this.getById(row.contentId);
      },
      // 提交数据操作
      submitFun() {
        this.$refs.contentForm.validate(valid => {
          if(valid){
            this.loading.status = true;
            content_content.saveOrUpdate(this.contentForm,this.dialog.flag).then(res => {
              if (res.data.code === 2000) {
                this.$message.success(res.data.msg);
                if(this.dialog.flag === 0){
                  this.pageNum = 1;
                }
                this.getDataList();
                // 关闭弹框
                this.dialog.visible = false;
                // 关闭加载
                this.loading.status = false;
              }else{
                this.$message.error(res.data.msg);
                this.loading.status = false;
                return false;
              }
            });
          }
        });
      },
      // 根据id获取信息
      getById(id) {
        content_content.getById(id).then(res => {
          if (res.data.code === 2000) {
            this.contentForm.contentId = res.data.data.contentId;
            this.contentForm.contentTypeId = res.data.data.contentTypeId;
            this.contentForm.companyId = res.data.data.companyId;
            this.contentForm.typePath = res.data.data.typePath;
            this.contentForm.contentTitle = res.data.data.contentTitle;
            this.contentForm.subtitle = res.data.data.subtitle;
            this.contentForm.display = res.data.data.display;
            this.contentForm.contentValue = res.data.data.contentValue;
            this.contentForm.contentNo = res.data.data.contentNo;
            this.contentForm.issueTime = res.data.data.issueTime;
            this.contentForm.expireTime = res.data.data.expireTime;
            this.contentForm.createTime = res.data.data.createTime;
            this.contentForm.keyWords = res.data.data.keyWords;
            this.contentForm.description = res.data.data.description;
            this.contentForm.imgUrl = res.data.data.imgUrl;
            this.contentForm.withMedia = res.data.data.withMedia;
            this.contentForm.url = res.data.data.url;
            this.contentForm.regionPath = res.data.data.regionPath;
            this.contentForm.type = res.data.data.type;
            this.contentForm.longitude = res.data.data.longitude;
            this.contentForm.latitude = res.data.data.latitude;
            this.contentForm.seq = res.data.data.seq;
            this.contentForm.collectionCount = res.data.data.collectionCount;
            this.contentForm.tagCount = res.data.data.tagCount;
            this.contentForm.tagDownCount = res.data.data.tagDownCount;
            this.contentForm.voteCount = res.data.data.voteCount;
            this.contentForm.commentCount = res.data.data.commentCount;
            this.contentForm.lookCount = res.data.data.lookCount;
            this.contentForm.membershipsLevel = res.data.data.membershipsLevel;
            this.contentForm.deleted = res.data.data.deleted;
          }
        });
      },
      // 根据id删除
      deleteFun(row) {
        this.$confirm("确定删除当前吗？", "系统提示", {confirmButtonText: "确定", cancelButtonText: "取消", type: 'error'
        }).then(() =>{
            content_content.remove(row.contentId).then(res => {
            if(res.data.code === 2000){
              this.$message.success(res.data.msg);
              this.getDataList();
            }else {
              this.$message.error(res.data.msg);
            }
          });
        }).catch(() => {
          this.$message.info("取消删除");
        });
      },
      // 清空表单
      resetForm(formName) {
        if (this.$refs[formName]) {
          this.$refs[formName].resetFields();
        }
      },
    }
  }
</script>
<style lang="less" scoped>
  .el-search-item {margin-bottom: 0;}
  .el-card/deep/.el-card__body {padding: 0 10px 10px 10px !important;}
  .el-card/deep/.el-card__header {border-bottom: none !important;padding: 10px 10px !important;}
</style>